<template>
    <!-- 左右布局 -->
    <div class="rbtinfo-style">
        <!-- 左侧机器人图标 -->
        <el-image :src="model.avatar" class="robot-image"></el-image>
        <!-- 右侧机器人名称与简介 -->
        <div class="name-info">
            <div class="rbtname">{{ model.modelname }}</div>
            <div class="rbtintro">{{ model.intro }}</div>
        </div>
    </div>
</template>
<script setup>

const props = defineProps(['model'])
const model = props.model


</script>
<style scoped lang="scss">
.rbtinfo-style {
    display: flex;
    gap: 0.5rem;
    row-gap: 0.5rem;
    align-items: center;
    width: 100%;

    .robot-image {
        width: 1.5rem !important;
        height: 1.5rem !important;
        flex-shrink: 0;
        display: block !important;
        object-fit: cover;
        
        :deep(.el-image__inner) {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
            object-fit: cover;
        }
        
        :deep(.el-image__wrapper) {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
        }
    }

    .name-info {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0.2rem;
        width: 80%;
        row-gap: 0.2rem;

        .rbtname {
            line-height: 0.9rem;
            font-size: 0.9rem;
            font-weight: 550;
        }

        .rbtintro {
            line-height: 0.7rem;
            font-size: 0.7rem;
            // width: 40vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #999;
        }

    }

    .name-label {
        justify-content: center;
    }
}
</style>
